<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="22" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="22" color="#333333"></uni-icons>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @tap="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-bar-title">意见反馈</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 反馈内容输入 -->
      <view class="feedback-input-area">
        <textarea
          class="feedback-textarea"
          v-model="feedbackContent"
          placeholder="点这里输入意见反馈内容"
          placeholder-style="color: #999;"
          maxlength="500"
        ></textarea>
      </view>
      
      <!-- 图片上传区域 -->
      <view class="upload-area">
        <view class="upload-box" @tap="chooseImage">
          <view class="upload-icon">
            <uni-icons type="camera" size="24" color="#333"></uni-icons>
          </view>
          <text class="upload-text">图片上传</text>
        </view>
        <!-- 已上传图片预览 -->
        <view class="image-preview-list" v-if="imageList.length > 0">
          <view class="image-preview-item" v-for="(image, index) in imageList" :key="index">
            <image :src="image" mode="aspectFill" class="preview-image"></image>
            <view class="delete-icon" @tap="deleteImage(index)">
              <uni-icons type="close" size="14" color="#fff"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="contact-area">
        <input
          type="number"
          v-model="phoneNumber"
          class="phone-input"
          placeholder="请输入您的手机号码，方便我们与您取得联系"
          placeholder-style="color: #999;"
          maxlength="11"
        />
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-area">
        <button class="submit-btn" @tap="submitFeedback">提交</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 反馈内容
const feedbackContent = ref('');
// 手机号码
const phoneNumber = ref('');
// 图片列表
const imageList = ref<string[]>([]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 选择图片
const chooseImage = () => {
  if (imageList.value.length >= 3) {
    uni.showToast({
      title: '最多上传3张图片',
      icon: 'none'
    });
    return;
  }
  
  uni.chooseImage({
    count: 3 - imageList.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 确保 tempFilePaths 被当作数组处理
      const paths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
      imageList.value = [...imageList.value, ...paths];
    }
  });
};

// 删除图片
const deleteImage = (index: number) => {
  imageList.value.splice(index, 1);
};

// 提交反馈
const submitFeedback = () => {
  // 表单验证
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'none'
    });
    return;
  }
  
  if (phoneNumber.value && !/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    });
    return;
  }
  
  // 显示提交中
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    
    // 清空表单
    feedbackContent.value = '';
    phoneNumber.value = '';
    imageList.value = [];
    
    // 延迟返回
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 101;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: sticky;
  top: 44px;
  z-index: 100;
}

.nav-bar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.nav-bar-right {
  width: 80rpx;
}

.content-area {
  flex: 1;
  padding: 30rpx;
}

.feedback-input-area {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.feedback-textarea {
  width: 100%;
  height: 240rpx;
  font-size: 28rpx;
  line-height: 1.6;
}

.upload-area {
  margin-bottom: 30rpx;
}

.upload-box {
  width: 160rpx;
  height: 160rpx;
  background-color: #fff;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #666;
}

.image-preview-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.image-preview-item {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.delete-icon {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 36rpx;
  height: 36rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-area {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 60rpx;
}

.phone-input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
}

.submit-area {
  padding: 0 40rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #cccccc;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  font-weight: normal;
  
  &.active {
    background-color: #007aff;
  }
}
</style> 